import { useDispatch, useSelector } from 'react-redux';

import type { AppDispatch, RootState } from '@/store';

/**
 * 增强版 useDispatch 钩子，带有类型化的 AppDispatch
 *
 * @description 此钩子是对 react-redux 的 useDispatch 的类型化封装，
 * 确保 dispatch 操作符合 Redux store 的类型定义
 *
 * @returns {AppDispatch} 类型化的 dispatch 函数
 *
 * @example
 * const dispatch = useAppDispatch();
 * dispatch(someActionCreator());
 */
export const useAppDispatch = useDispatch.withTypes<AppDispatch>();

/**
 * 增强版 useSelector 钩子，带有类型化的 RootState
 *
 * @description 此钩子是对 react-redux 的 useSelector 的类型化封装，
 * 确保选择器函数能够正确访问 Redux store 的状态类型
 *
 * @template T - 选择器返回值的类型
 *
 * @param {(state: RootState) => T} selector - 从 Redux store 中选择状态的回调函数
 * @param {?any} equalityFn - 可选，用于比较前后状态是否相等的函数
 *
 * @returns {T} 从 Redux store 中选择的状态
 *
 * @example
 * const count = useAppSelector(state => state.counter.value);
 */
export const useAppSelector = useSelector.withTypes<RootState>();

/*
 * 典型用法示例
 *
 * 1. 基本用法 - 获取状态
 * const user = useAppSelector(state => state.user);
 *
 * 2. 基本用法 - 派发 action
 * const dispatch = useAppDispatch();
 * dispatch(fetchUserData());
 *
 * 3. 性能优化 - 使用 shallowEqual 避免不必要的重新渲染
 * import { shallowEqual } from 'react-redux';
 * const { name, age } = useAppSelector(
 *   state => ({
 *     name: state.user.name,
 *     age: state.user.age
 *   }),
 *   shallowEqual
 * );
 */
